<script lang="ts" setup>
import { reactive, ref } from "vue";
import { AxiosResponse } from "axios";
import { ReturnTree, OrgUnitTreeNode } from "@whjxtech/jxtech-component";
import { orgUnitTree } from "@/api/modules/org/tree";
import { ElTree } from "element-plus";

//共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
const emit = defineEmits<{
  (e: "node-click", row: ReturnTree<any>, column: any, event: Event): void; //行点击事件
}>();

const props = defineProps({
  showCheckbox: {
    type: Boolean,
    default: false
  }
});

const elTreeRef = ref<InstanceType<typeof ElTree>>();

const UnitAsyncTreeState = reactive({
  props: {
    label: "text",
    children: "children",
    isLeaf: "leaf"
  },
  /**过滤树数据 */
  filterTreeData: (treeData: ReturnTree<OrgUnitTreeNode>[]) => {
    const treeNodeArr: any[] = [];
    treeData.forEach(item => {
      let treeNode: any = item;
      treeNode.leaf = !item.isParent;
      treeNodeArr.push(treeNode);
    });
    return treeNodeArr;
  },
  /**异步树加载 */
  loadNode: (node: any, resolve: any) => {
    let queryparam: any = {};
    queryparam.id = node.level === 0 ? "0" : node.data.id;
    orgUnitTree(queryparam)
      .then((res: AxiosResponse<ReturnTree<any>[]>) => {
        resolve(UnitAsyncTreeState.filterTreeData(res.data));
      })
      .finally(() => {
        //loadingInstance?.close()
      });
  },
  /**节点点击事件 */
  handleNodeClick: (treeData: ReturnTree<any>, column: any, event: Event) => {
    emit("node-click", treeData, column, event);
  }
});

defineExpose({
  getSelectedData: () => {
    return elTreeRef.value?.getCurrentNode();
  },
  getCheckedNodes: () => {
    return elTreeRef.value?.getCheckedNodes();
  }
});
</script>
<template>
  <el-tree
    ref="elTreeRef"
    highlight-current
    :expand-on-click-node="false"
    lazy
    :show-checkbox="showCheckbox"
    node-key="id"
    :props="UnitAsyncTreeState.props"
    :load="UnitAsyncTreeState.loadNode"
    :default-expanded-keys="['10000']"
    @node-click="UnitAsyncTreeState.handleNodeClick"
    class="jxtech-org-tree"
  >
    <template #default="{ node, data }">
      <span>
        <div v-if="data.isParent">
          <img src="@/assets/images/tree-icon/folder-open.png" v-if="node.expanded" />
          <img src="@/assets/images/tree-icon/folder-close.png" v-else />
        </div>
        <span style="padding: 0 10px" v-else class="last-node-icon"></span>
      </span>
      <span class="custom-tree-node">
        <span>{{ node.label }}</span>
      </span>
      <span>
        <slot :row="data" :node="node"></slot>
      </span>
    </template>
  </el-tree>
</template>

<style lang="scss" scoped>
img {
  height: 0.9em;
  margin-right: 0.6em;
}

.jxtech-org-tree {
  .last-node-icon {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--jxtech-color-primary);
      opacity: 0.4;
    }
  }

  :deep(.is-current) {
    .last-node-icon::after {
      opacity: 1;
    }
  }
}
</style>
